<template>
	<view class="page">
		
		<!-- Tabbar页面 -->
		<view v-if="tabberPageLoadFlag[0]" :style="{ display: currentTabbarIndex === 0 ? '' : 'none' }">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<index ref="pageA"></index>
			</scroll-view>
		</view>
		<!-- 活动 -->
		<view v-if="tabberPageLoadFlag[1]" :style="{ display: currentTabbarIndex === 1 ? '' : 'none' }">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<event ref="pageB"></event>
			</scroll-view>
		</view>
		<!-- 兴趣 -->
		<view v-if="tabberPageLoadFlag[1]" :style="{ display: currentTabbarIndex === 1 ? '' : 'none' }">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<interest ref="pageC"></interest>
			</scroll-view>
		</view>
		<!-- 消息 -->
		<view v-if="tabberPageLoadFlag[2]" :style="{ display: currentTabbarIndex === 2 ? '' : 'none' }">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<news ref="pageD"></news>
			</scroll-view>
		</view>
		<!-- 我的 -->
		<view v-if="tabberPageLoadFlag[3]" :style="{ display: currentTabbarIndex === 3 ? '' : 'none' }">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<my ref="pageE"></my>
			</scroll-view>
		</view>
		
		
		<view class="tabbar">
			<tabbar-1 theme="light" :value="currentTabbarIndex" :color="color" @change="changeTabbar" />
		</view>
	</view>
</template>

<script>
	import index from '@/pages/index/index.vue';
	import event from '@/pages/event/index.vue';
	import interest from '@/pages/interest/index.vue';
	import news from '@/pages/news/index.vue';
	import my from '@/pages/my/index.vue';
	

	export default {
		components: {
			index,
			event,
			interest,
			news,
			my,
		},
		data() {
			return {
				color: '#892FE8',
				currentTabbarIndex: 0,
				
				// 自定义底栏对应页面的加载情况
				tabberPageLoadFlag: []
			}
		},
		onLoad(options) {
			const index = Number(options.index || 0);
			// 根据底部tabbar菜单列表设置对应页面的加载情况
			for (let i = 0; i < 5; i++) {
				this.tabberPageLoadFlag.push(i === index);
			}
			this.changeTabbar(index);
			console.log(this.$refs);
		},
		mounted() {
		},
		onShow() {},
		
		methods: {
			// 导航页面滚动到底部
			tabbarPageScrollLower(e) {
				// 可以做些事情
			},
			// 修改当前选中的tabbar
			changeTabbar(index) {
				if (this.currentTabbarIndex === index) return;
				this._switchTabbarPage(index);
				this.currentTabbarIndex = index;
			},
			
			// 切换导航页面
			_switchTabbarPage(index) {
				// 底部tabbar短震动骚操作，真机效果很不错，模拟器忽略就行
				//wx.vibrateShort();
				// 正式代码
				const selectPageFlag = this.tabberPageLoadFlag[index];
				if (selectPageFlag === undefined) {
					return;
				}
				if (selectPageFlag === false) {
					this.tabberPageLoadFlag[index] = true;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F6F6F6;
		width: 100%;
		height: 100vh;
		position: relative;
	}
	
	.tabbar {
		position: fixed;
		bottom: 0;
		margin: 10px 20px;
		padding-bottom: 10rpx;
		padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
		background-color: #55aaff;
	}

</style>